<template>

  <div class="app-container" id="app">

    <el-form :inline="true"  class="demo-form-inline">

      <el-form-item>
        <el-button type="primary" @click="jumpToAddRecord()">规费信息登记</el-button>
        <el-button type="danger" :disabled="this.multipleSelection.length===0" @click="removeAll">规费信息删除</el-button>
      </el-form-item>
      <el-form-item>
        <div >
          <el-input placeholder="请输入内容" v-model="feesQuery.recordInfo" class="input-with-select" style="width: 400px">
            <el-select v-model="feesQuery.select" slot="prepend" placeholder="请选择" style="width: 100px">
              <el-option label="车牌号" value="1"></el-option>
              <el-option label="修理厂" value="2"></el-option>
              <el-option label="经办人" value="3"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search" @click="getList()"></el-button>
          </el-input>
        </div>
      </el-form-item>

    </el-form>
    <el-table
      :data="feesList"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column prop="id" label="编号"  align="center" width="80%">
        <template slot-scope="scope">
          {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        type="selection" width="80%" align="center">
      </el-table-column>
      <el-table-column prop="carNo" label="车牌号" align="center" >
      </el-table-column>

      <el-table-column prop="feesName" label="规费名称" align="center" >
      </el-table-column>
      <el-table-column prop="feesDate" label="缴费时间 " align="center" >
      </el-table-column>

      <el-table-column prop="feesAmount" label="规费金额" align="center" >
      </el-table-column>
      <el-table-column prop="unitName" label="收费单位" align="center" >
      </el-table-column>
      <el-table-column prop="rname" label="经办人" align="center" >
      </el-table-column>
      <el-table-column prop="remarks" label="备注" align="center" >
      </el-table-column>

      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <router-link :to="'/daily_work/edit_fee_record/'+scope.row.id">
            <el-button type="success" size="mini" icon="el-icon-edit"
            >修改
            </el-button>
          </router-link>
          <el-button
            type="danger"
            size="small"
            icon="el-icon-delete"
            @click="remove(scope.row.id)"
          >删除
          </el-button
          >
        </template>
      </el-table-column>

    </el-table>
    <el-pagination
      :hide-on-single-page="true"
      layout="total, prev, pager, next, jumper"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      align="center"
      style="padding: 30px 0 ; text-align: center"
      @current-change="getList"
    >
    </el-pagination>
  </div>


</template>

<script>
import api_repair from '@/api/fees_records.js';
export default {
  name: "repair_record",
  data() {
    return {
      feesList: [],
      currentPage: 1,
      pageSize: 5,
      total: 0,
      feesQuery: {
        select: "",
        recordInfo: ""
      },
      select: "",
      multipleSelection: [],
    }
  },
  created() {
    this.getList();
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    getList(currentPage =1 ) {
      this.currentPage = currentPage;
      api_repair.getRecordList(this.currentPage,this.pageSize,this.feesQuery)
        .then(Response => {
          this.feesList = Response.data.list;
          this.total = Response.data.total;
        })
    },
    jumpToAddRecord(){
      this.$router.push({path: "/daily_work/add_fees_record"});
    },
    remove(id){
      this.$confirm("此操作将永久删除该条信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        api_repair.remove(id).then((Response) => {
          this.getList();
        })
        this.$message({
          type: "success",
          message: "删除成功!",
        });

      })
    },
    removeAll(){
      this.$confirm("此操作将永久删除该条信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.multipleSelection.forEach((item,i,multipleSelection) =>{
          api_repair.remove(item.id).then((Response) => {
            this.getList();
          })
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
      })
    }

  }
}
</script>

<style scoped>

</style>
